<template>
    <div class="label-select">
        <div class="label-style">{{labelName}}</div>
        <div class="select-style">
            <a-date-picker v-model:value="dateValue" :picker="pickerType" :style="'width:' + selectWidth +'vw;'+ 'border-radius:5px'"
                @change="changeFunc" :placeholder="placeholder" />
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LabelSingleDatePicker'
}
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Dayjs } from 'dayjs';
interface Props {
    labelName?: string,
    dateValue: string,
    placeholder?: string,
    selectWidth: number,
    pickerType?: string,
}

const props = withDefaults(defineProps<Props>(), {
    labelName: '',
    selectWidth: 6,
    pickerType: 'year'
})

console.log('默认绑定的值', props.dateValue);
const emits = defineEmits(['selectedChangeFunc'])
// 需要传递的值
const handleChange = (value: string) => {
    console.log('子组件的值', value);
    emits('selectedChangeFunc', value);
}

const changeFunc = (date: Dayjs | string, dateString: string) => {
    console.log('这是changeFunc-date', date);
    console.log('这是changeFunc-dateString', dateString);
    emits('selectedChangeFunc', dateString);
}

const okFunc = (date: Dayjs | string) => {
    console.log('okFunc-date', date);
}
</script>
<style lang="less" scoped>
.label-select {
    height: 32px; // 默认输入框高度为32px
    display: flex;
    align-items: center;

    .select-style {
        margin-left: 10px;
    }

    :deep(.ant-select-selector) {
        text-align: left;
    }
}
</style>